<template>
	<view class="wrap">
		<text class="title" v-text="item.label" :class="item.required ? 'inputRequired' : ''" v-if="item.label"></text>
		<view class="uni-input" :disabled="item.disabled" :name="item.name" type="text">
			<view class="tips" v-for="(chooseEle, index) in item.chooseItems" :key="chooseEle.id">
				<text v-text="chooseEle.name"></text>
				<view @click="decrease(chooseEle)" v-if="!item.hiddenDel">-</view>
			</view>
			<navigator class="tipsIncrease" :url="item.url" v-if="!item.hiddenDel">+</navigator>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {};
	},
	methods: {
		...mapActions(['idsObjIncrease', 'idsObjDecrease', 'updateTipsOptions']),
		decrease(obj) {	
			debugger
			this.idsObjDecrease(obj)
		}
	},
	created() {
		this.updateTipsOptions(this.item)
		
	},
	
	components: {},
	
	props: {
		item: {
			type: Object,
			required: true
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	border-bottom: 1upx solid #eee;
	margin: 0 50upx;
	// height: 100upx;
	.title {
		display: block;
		text-align: left;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-top: 20upx;
		color: #3c68e5;
	}

	.uni-input {
		line-height: 80upx;
		min-height: 80upx;
		padding: 0 10upx;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		.tips {
			display: inline-block;
			background: #3c68e5;
			height: 60upx;
			padding: 0upx 30upx;
			margin: 10upx;
			position: relative;
			border-radius: 8upx;
			line-height: 60upx;
			text {
				line-height: 60upx;
				font-size: 26upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
			view {
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				background: #ff534a;
				font-size: 40upx;
				font-weight: 600;
				right: 0;
				top: 0;
				position: absolute;
				margin-top: -5upx;
				margin-right: -5upx;
				line-height: 20upx;
				color: #fff;
				text-align: center;
			}
		}
		.tipsIncrease {
			width: 100upx;
			height: 60upx;
			border: 1upx dashed rgba(170, 170, 170, 1);
			border-radius: 8upx;
			font-size: 50upx;
			line-height: 50upx;
			text-align: center;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(170, 170, 170, 1);
			margin: 10upx;
			display: inline-block;
		}
	}
}

.input-placeholder {
	font-size: 32upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(204, 204, 204, 1);
	// color:#333;
	line-height: 80upx;
}
</style>
